今天要介紹傳統 Angular 建立應用程式的方式 - 模組(Module)。
Angular 模組是過去 Angular 應用程式的基本組織,用於將相關的組件、指令、管道和服務等功能集合在一起。而基於模組的元件需要在模組中註冊,並且只能在該模組中使用。
目前版本若要建立基於模組的元件,需要在 @Component
裝飾器中將 standalone
屬性設為 false
。
@Component({
...
standalone: false, // 設定為基於模組的元件
})
一開始,我們先在 Angular 根元件附近建立一個根模組 Root Module,命名為 app.module.ts
。
模組需要有兩個關鍵部分:
@NgModule
裝飾器:用於定義模組的相關設定。@NgModule
是定義了模組的相關設定。
裝飾器中常用的屬性有:
declarations
:聲明模組中包含的元件、指令和管道,代表可以在這個模組中使用這些元件。
standalone: false
)。bootstrap
:指定應用程式的根元件時,需要加上這設定。imports
:引入其他模組給當前模組內聲明的元件使用。可兼容獨立元件和基於模組的元件。
BrowserModule
:每個 Angular 應用程式當使用 Angular Module 時都需要引入的模組,提供瀏覽器相關的功能。 ( 只在能在根模組中引入一次 )CommonModule
:給其他子模組使用的模組,提供常用的指令和管道。standalone: true
的元件,可以和模組搭配使用。exports
:將模組中的組件、指令和管道導出,以便其他模組可以使用。
如果沒有正確引入
BrowserModule
或CommonModule
,Angular 應用會出現錯誤。
- 在根模組中必須引入
BrowserModule
,否則應用無法在瀏覽器中正確啟動- 在子模組中必須引入
CommonModule
,否則子模組中的元件無法使用 Angular 提供的常用指令和管道。
根模組範例
bootstrap
屬性中指定應用程式的根元件。BrowserModule
模組。import { NgModule } from '@angular/core';
import { App } from './app';
import { HeaderComponent } from './header/header.component';
import { RouterOutlet } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [App, HeaderComponent],
imports: [BrowserModule, RouterOutlet],
bootstrap: [App],
})
export class AppModule {}
子模組範例
imports
屬性中註冊。CommonModule
模組。import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TaskListComponent } from './task-list/task-list.component';
import { TaskItemComponent } from './task-item/task-item.component';
@NgModule({
declarations: [TaskListComponent, TaskItemComponent],
imports: [CommonModule],
exports: [TaskListComponent, TaskItemComponent] // 導出子元件
})
export class TasksModule {}
建立模組後,需要在 main.ts
中啟動應用程式。
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
platformBrowser().bootstrapModule(AppModule)
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
ng generate module <module-name>
ng g m <module-name> // 簡寫
獨立元件
imports
屬性來引入所需的模組或其他元件。模組
imports
屬性來了解元件所依賴的模組和其他元件。由於模組的複雜性且不易排查問題等原因,Angular 官方目前推薦使用獨立元件來建立應用程式,但舊專案仍然會使用模組的方式來組織元件,因此了解模組的使用方式仍然很重要。
今天的目標是將昨日的獨立元件改為基於模組的元件。
app.module.ts
main.ts
的啟動方式這篇文章介紹了 Angular 模組的基本概念和使用方式,讓大家了解如何使用模組。下一篇文章會介紹元件內部相關的使用方式